	<div class="step externalService-step panel panel-default">
		<div class="panel-heading">
			<step-heading title="step.url"><small>{{step.url.length > 80 ? step.url.substring(0, 80) + "..." : step.url.substring(0, 80) }}</small></step-heading>
		</div>
		<div class="panel-body" ng-hide='step.iface.isCollapsed'>
			<div class="row">
				<div class="col-md-12">
				
                    <div class="service-url-wrap">
                    	<div class="row">
	                    	<form class='form-group' name='form'>
	                    		<div class="col-md-12">
			                        <div class="input-group form-group">
			                            <span class="input-group-addon help-tooltip" tooltip="{{'externalServiceStepServiceUrlTooltip' | translate}}" tooltip-trigger='mouseenter' tooltip-popup-delay='1000'>{{'externalServiceStepServiceUrlLabel' | translate}}</span>
			                            <input name="url" ng-model='step.url' class="form-control ng-pristine ng-valid ng-valid-pattern" type="text" placeholder="{{'externalServiceStepServiceUrlInputPlaceholder' | translate}}" required></input>
			                        </div>
			                        <div class="validation-error"  ng-show="form.url.$invalid">{{'externalServiceStepFormErrorLabel' | translate}}</div>
			                    </div>
			                </form>
			            </div>
			            <!-- url params -->
                        <div ng-show="step.urlParams && step.urlParams.length > 0" class='row'>
							<div class="md-col-12">
								<h4 class="col-md-12" >Url parameters</h4>
							</div>
                            <div ng-repeat='urlParam in step.urlParams' class="col-md-6">
                                <div lookup-context class="input-group input-group-sm form-group">
                                    <span class="input-group-addon">{{'externalServiceStepUrlParamNameLabel' | translate}}</span>
                                    <input ng-model='urlParam.name' class="form-control ng-pristine ng-valid ng-valid-pattern" type="text" required></input>
                                    <span class="input-group-addon">{{'externalServiceStepUrlParamValueLabel' | translate}}</span>
                                    <input ng-model='urlParam.value' lookup-target class="form-control ng-pristine ng-valid ng-valid-pattern" type="text" required></input>
                                    <variable-lookup variable="urlParam.value" view="input-group" replace="true"></variable-lookup>
                                    <span ng-click='removeUrlParam(step,urlParam)' class="input-group-addon fa fa-times btn-danger rvd-clickable"></span>
                                </div>
                            </div>
                        </div>
						<!-- http headers -->
						<div ng-show="step.httpHeaders && step.httpHeaders.length > 0" class='row'>
							<div class="md-col-12">
								<h4 class="col-md-12" >Http headers</h4>
							</div>
							<div ng-repeat='httpHeader in step.httpHeaders' class="col-md-6">
								<div lookup-context class="input-group input-group-sm form-group">
									<span class="input-group-addon">Name</span>
									<input ng-model='httpHeader.name' class="form-control ng-pristine ng-valid ng-valid-pattern" type="text" required></input>
									<span class="input-group-addon">Value</span>
									<input ng-model='httpHeader.value' lookup-target class="form-control ng-pristine ng-valid ng-valid-pattern" type="text" required></input>
									<variable-lookup variable="httpHeader.value" view="input-group" replace="true"></variable-lookup>
									<span ng-click='step.removeHttpHeader(httpHeader)' class="input-group-addon fa fa-times btn-danger rvd-clickable"></span>
								</div>
							</div>
						</div>
                        <div class="validation-warning row col-md-12 form-group" ng-show="step.urlParams.length>0 && (step.method=='POST' || step.method=='PUT') && step.contentType=='application/x-www-form-urlencoded' && !step.populatePostBodyFromParams">{{"externalServiceStepIgnoredParamsWarning" | translate}}</div>

                        <div class="form-group">
							<button ng-click="addUrlParam(step)" type="button" class="btn btn-primary btn-xs" title="{{'externalServiceStepAddParamButtonPopover' | translate}}"><span>{{'externalServiceStepAddParamButton' | translate}}</span></button>
							<button ng-click="step.addHttpHeader({name:'', value:''})" type="button" class="btn btn-primary btn-xs" title="Add name and value for an http header"><span>Add http header</span></button>
						</div>

						<i ng-click="step.iface.advancedShown = !step.iface.advancedShown" class='fa fa-cog rvd-clickable' ng-class="{'rvd-active': step.iface.advancedShown }"></i>
						<div ng-show="step.iface.advancedShown" class="row">
							<div class="rvd-spacer10"></div>
							<div class="col-md-12">
								<div class="input-group form-group">
									<span ng-show="step.iface.advancedShown" class="input-group-addon">{{'externalServiceStepMethodLabel' | translate}}</span>
									<select ng-show="step.iface.advancedShown" ng-model='step.method' class="form-control">
										<option value='GET'>GET</option>
										<option value='POST'>POST</option>
										<option value='PUT'>PUT</option>
										<option value='DELETE'>DELETE</option>
									</select>
									<span ng-show="step.iface.advancedShown" class="input-group-addon" title="Use this content type when POSTing or PUTing">Content Type</span>
									<select ng-disabled="step.method != 'POST' && step.method != 'PUT' " ng-show="step.iface.advancedShown" ng-model='step.contentType' class="form-control">
										<option value='application/x-www-form-urlencoded' title='Send request data using application/x-www-form-urlencoded content type'>www form</option>
										<option value='application/json' title='Send request data using application/json content type'>json</option>
									</select>
									<span ng-show="step.iface.advancedShown" class="input-group-addon" title="{{'externalServiceStepUsernameTooltip' | translate}}">{{'externalServiceStepUsernameLabel' | translate}}</span>
									<input ng-show="step.iface.advancedShown"  name="username" ng-model='step.username' class="form-control" type="text"></input>
									<span ng-show="step.iface.advancedShown" class="input-group-addon" title="{{'externalServiceStepPasswordTooltip' | translate}}">{{'externalServiceStepPasswordLabel' | translate}}</span>
									<input ng-show="step.iface.advancedShown" name="password" ng-model='step.password' class="form-control" type="text"></input>
									
								</div>
								
								<div ng-show="step.iface.advancedShown && (step.method=='POST' || step.method=='PUT')">
									<div  class="form-group">
										<textarea ng-disabled="step.populatePostBodyFromParams" ng-model="step.requestBody" class="form-control" placeholder="type POST/PUT content here"></textarea>
									</div>
									<div ng-show="step.contentType=='application/x-www-form-urlencoded'" class="form-group checkbox" title="Build request body by url-encoding the service parameters defined above.">
										<label>
											<input ng-model="step.populatePostBodyFromParams" type="checkbox"><small>Automatically populate from service parameters</small>
										</label>
									</div>
								</div>
							</div>
		                </div>
                        
                     </div>
                        
					<h4>{{'externalServiceStepAssignResponseLabel' | translate}} <i ng-click='step.iface.helpCollapsed = !step.iface.helpCollapsed' class="fa fa-info-circle rvd-clickable"></i></h4>
                    <div collapse="!step.iface.helpCollapsed">
                        <div class="well">
                            <p>{{'externalServiceStepAssignResponseText1' | translate}}</p>
                            <p>{{'externalServiceStepAssignResponseText2' | translate}}</p>
                            <ul>
                                <li>{{'externalServiceStepAssignResponseText3' | translate}}</li>
                                <li>{{'externalServiceStepAssignResponseText4' | translate}}</li>
                                <li>{{'externalServiceStepAssignResponseText5' | translate}}</li>
                                <li>{{'externalServiceStepAssignResponseText6' | translate}}</li>
                            </ul>
                            <p>
                                {{'externalServiceStepAssignResponseText7' | translate}}
                            </p>
                            <h6><strong>{{'externalServiceStepAssignResponseText8' | translate}}</strong></h6>
                            <p>
                            	{{'externalServiceStepAssignResponseText9' | translate}} 
                            </p>
                            <div class="wellinfo-rollup"><i ng-click='step.iface.helpCollapsed = !step.iface.helpCollapsed' class="fa fa-angle-double-up rvd-clickable"></i></div>
                         </div> 
                    </div>
					
					<div class='row form-group'>
						<div class='col-md-2'>
							<button ng-click="step.addAssignment()" type="button" class="btn btn-primary btn-sm"><span>{{'externalServiceStepAddAssignmentButton' | translate}}</span></button>
						</div>
					</div>
					
					<div ng-repeat="assignment in step.assignments" class="assignment form-group">
						<div class="row">
							<div class="col-md-5">
								<div class="input-group input-group-sm form-group">
									<span class="input-group-addon">{{'externalServiceStepAssignToLabel' | translate}}</span>
									<input ng-model='assignment.destVariable' rvd-variable='assignment.destVariable' type="text" class="form-control" placeholder="{{'externalServiceStepAssignToInputPlaceholder' | translate}}" required></input>
									<span class="input-group-addon">{{'externalServiceStepScopeLabel' | translate}}</span>
									<select ng-model='assignment.scope' class="form-control">
										<option value='module'>{{'externalServiceStepScopeModuleOption' | translate}}</option>
										<option value='application'>{{'externalServiceStepScopeAppOption' | translate}}</option>
									</select>
								</div>
								
								<div ng-class='{"rvd-disabled":!(step.doRouting && (step.nextType=="responseBased" || step.nextType=="mapped"))}' class="input-group input-group-sm form-group">
									<span class="input-group-addon">{{'externalServiceStepModuleScopeLabel' | translate}}</span>
									<select sync-model ng-disabled='!(step.doRouting && (step.nextType=="responseBased" || step.nextType=="mapped"))'  ng-model='assignment.moduleNameScope' ng-options='target.name as target.label for target in getAllTargets()' class="form-control height-fix">
										<option value="">{{'externalServiceStepModuleScopeOption' | translate}}</option>
									</select>  
								</div>	
								
							</div>
							
							<div class="col-md-6">
							<value-extractor extractor-model='assignment.valueExtractor'></value-extractor>
							</div>
							<div class="col-md-1">
								<span ng-click='removeAssignment(step,assignment)' class="fa fa-times text-muted remove-button rvd-clickable"></span>
							</div>
						</div>
					</div>
					

				
					<h4>{{'externalServiceStepMakeRoutingLabel' | translate}} <i ng-click='step.iface.routingHelpCollapsed = !step.iface.routingHelpCollapsed' class="fa fa-info-circle rvd-clickable"></i></h4>
                    <div collapse="!step.iface.routingHelpCollapsed">
                        <div class="well">
                            <p>{{'externalServiceStepMakeRoutingText1' | translate}}</p>
                            <ul>
                            	<li>{{'externalServiceStepMakeRoutingText2' | translate}}</li>
                                <li>{{'externalServiceStepMakeRoutingText3' | translate}}</li>
                                <li>{{'externalServiceStepMakeRoutingText4' | translate}}</li>
                                <li>{{'externalServiceStepMakeRoutingText5' | translate}}</li>
                            </ul>
                            <div class="wellinfo-rollup"><i ng-click='step.iface.routingHelpCollapsed = !step.iface.routingHelpCollapsed' class="fa fa-angle-double-up rvd-clickable"></i></div>
                         </div> 
                    </div>		
                    			
					<div class="row">
						<div class="col-md-6">
                            <div class="input-group input-group-sm routing-decision-controls form-group">
                                <span class="input-group-addon">
									<input ng-model='step.doRouting' type="checkbox">
								</span>
                                
								<span ng-class="{'text-muted': !step.doRouting}"  ng-model='step.next' class="input-group-addon">{{'externalServiceStepContinueToCheckLabel' | translate}}</span>
								<span ng-if='step.doRouting' class="input-group-addon">
									<span>{{'externalServiceStepFixedRadio' | translate}} &nbsp;</span>
									<input ng-model='step.nextType' value='fixed' type="radio">
								</span>
								<span ng-if='step.doRouting' class="input-group-addon">
									<span>{{'externalServiceStepDynamicRadio' | translate}} &nbsp;</span>
									<input ng-model='step.nextType' value='responseBased' type="radio" ng-disabled="true" title="Dynamic routing has been deprecated">
								</span>								
								<span ng-if='step.doRouting' class="input-group-addon">
									<span>{{'externalServiceStepMappedRadio' | translate}} &nbsp;</span>
									<input ng-model='step.nextType' value='mapped' type="radio">
								</span>
                                
								<!-- this is just a placeholder -->
								<input ng-hide='step.doRouting' ng-disabled='true' class="form-control height-fix">
							</div>
							<div ng-show="step.doRouting" class="form-group validation-warning"><span translate='externalServiceStepDynamicWarning'></span>
								<a href="http://docs.telestax.com/fix-dynamic-routing-external-services" target="_blank"> Read more...</a>
							</div>
							<div>
								<div class="form-group">
									<button ng-show="step.nextType=='mapped'" ng-click="step.addRouteMapping()" type="button" class="btn btn-primary btn-sm"><span>{{'externalServiceStepAddMappingButton' | translate}}</span></button>
								</div>
								<div ng-repeat="mapping in step.routeMappings" ng-show="step.nextType=='mapped'" class="row route-mapping" >
									<div class="col-md-11">
										<div class="input-group input-group-sm form-group">
											<span class="input-group-addon">{{'externalServiceStepValueLabel' | translate}}</span>
											<input ng-model="mapping.value" class="form-control" required>
											<span class="input-group-addon">{{'externalServiceStepContinueToLabel' | translate}}</span>
											<!--<select ng-model="mapping.next" sync-modules="" ng-options="target.name as target.label for target in getAllTargets()" class="form-control" style="min-width:140px;"></select>-->
											<select sync-modules name='next' ng-model='mapping.next' ng-options='target.name as target.label for target in getAllTargets()' class="form-control height-fix" required>
												<option value=""></option>
											</select>
										</div>
									</div>
									<div class="col-md-1">
										<span ng-click="step.removeRouteMapping(mapping)" class="fa fa-times text-muted remove-button rvd-clickable"></span>
									</div>
								</div>
								<br ng-show="step.doRouting && (step.nextType=='mapped' || step.nextType=='responseBased')">
								<!-- 
								<div class="row form-group" ng-show="step.doRouting && (step.nextType=='mapped' || step.nextType=='responseBased')">
									<div class="input-group col-md-12">
										<span class="input-group-addon">Default route</span>
										<module-picker ng-model='step.defaultNext'></module-picker>
									</div>
								</div>
								 -->
							</div>
													
						</div>
                        <div class='col-md-6'>
                        	<form name='form'>
                        		<div  ng-if='step.doRouting && step.nextType=="fixed"'>
									<select sync-model name='next' ng-if='step.doRouting && step.nextType=="fixed"'  ng-model='step.next' ng-options='target.name as target.label for target in getAllTargets()' class="form-control height-fix" required>
										<option value=""></option>
									</select>   
									<div class="validation-error"  ng-if="form.next.$invalid">{{'externalServiceStepChooseTargetLabel' | translate}}</div>
								</div>                         
                                <value-extractor ng-if='step.doRouting && (step.nextType=="responseBased" || step.nextType=="mapped")' extractor-model='step.nextValueExtractor'></value-extractor>
                            </form>
                        </div>
					</div>
					<h4>Errors & Timeouts</h4>
					<div class="row">
						<div class="form-group col-md-5">
							<div class="input-group ">
								<span class="input-group-addon help-tooltip" title="{{'externalServiceStepRemoteErrorTitle' | translate}}">{{'externalServiceStepRemoteErrorLabel' | translate}}</span>
								<module-picker ng-model='step.exceptionNext'></module-picker>
							</div>
						</div>

						<div class="form-group col-md-7">
							<div class="input-group">
								<span class="input-group-addon help-tooltip" tooltip="{{'esTimeoutLimitTooltip' | translate}}" tooltip-trigger='mouseenter' tooltip-popup-delay='1000'>{{'Timeout' | translate}}</span>
								<input ng-model="step.timeout" placeholder="5000" type="number" auto-clear class="form-control mask-invalid" />
								<span class="input-group-addon help-tooltip" tooltip="{{'esTimeoutTooltip' | translate}}" tooltip-trigger='mouseenter' tooltip-popup-delay='1000'>{{'esTimeoutLabel' | translate}}</span>
								<module-picker ng-model='step.onTimeout' auto-clear></module-picker>
							</div>
						</div>

					</div>


				</div>
			</div>
					
		</div>
	</div>
